<template>
  <my-table listPath="user/page" savePath="user/save" deletePath="user/delete" :table="table" :pageParams="pageParams" :rules="rules" dialogTitle="对话框" :pageSize="[5,10,20,35,50]" :dialogForm="form" @show-dialog="sdialog">
    <template v-slot:dialogSlot>
      <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username" clearable></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" clearable></el-input>
      </el-form-item>
      <el-form-item label="部门名称" prop="deptId">
          <tree-select v-if="showTree" :props="props" :options="option" @getValue="treeval" :valueTitle1="title"></tree-select>
      </el-form-item>
      <el-form-item label="角色" prop="roles">
         <el-select v-if="showTree" clearable
            v-model="form.roles"
            multiple
            collapse-tags
            style="width: 100%;"
            placeholder="请选择">
            <el-option
              v-for="item in option2"
              :key="item.value"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
      </el-form-item>
    </template>
  </my-table>
</template>

<script>
  import myTable from '../../components/myTableszxt.vue';
    import treeSelect from '../../components/treeSelect.vue'
  export default{

    name:'premission',
    components:{myTable,treeSelect},
    data() {

      return {
        option:{},
        option2:{},
        showTree:false,
        props:{
          value:'id',       // ID字段名
          label: 'name',     // 显示名称
          children: 'childrens'
        },
       pageParams:{
            limit:10,
            page:1,
            sort:'id',
            order:'asc',
            search:''
        }
        ,
        form:{ 
          username:'',
          name:'',
          deptId:'',
          roles:[]
        },
        title:'',
        table:[
          {
            title:'用户名',
            field:'username'
          },
          {
            title:'姓名',
            field:'name'
          },
          {
            title:'部门',
            field:'deptName'
          },
          {
            title:'角色',
            field:'roleNames'
          },
        ],
        rules:{
          username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
          name: [{required: true, message: '请输入姓名', trigger: 'blur' }],
          deptId:[{required: true, message: '请选择部门', trigger: 'blur' }],
          roles: [
               { type: 'array', required: true, trigger: 'blur', message: '角色不能为空' }
          ]
        },

      }
      },
      methods:{
        treeval(val){
         this.form.deptId=val;
        },
        sdialog(val){
          this.title=null;
          this.$ajax.post('dept/combotree',{}).then(res=>{
                 var result=res.data;
                 if(result.success){
                  this.showTree=false;
                  this.option=result.data;
                  this.$nextTick(() => {
                      this.showTree=true;
                  });
                  if(val.deptNameId){
                    this.form.deptId=val.deptNameId;
                    this.title=val.deptName;
                  }
                 }
           }).catch(res=>{})
           this.$ajax.post('role/findAll',{}).then(res=>{
             console.log(this.form.roles)
                  var result=res.data;
                  if(result.success){
                   this.option2=result.data;

                   if(val.roleId){
                     var roles = val.roleId.split(',').map(Number)
                     var roles1 = []
                     for (var arrInt in roles) {
                       roles1.push(roles[arrInt])
                      }
                      this.form.roles=roles1;
                   }else{
                      this.form.roles=[];
                     }

                      // this.form.roles=[];
                  }
            }).catch(res=>{})
        }
      }
   }
</script>

<style>
</style>
